<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="店铺管理" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()" right-text="保存"
				@clickRight="setStoreConf"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="box">
			<view class="list flex_r_between">
				<view class="label">是否自动接单</view>

				<view class="switch">
					<switch :checked="info.auto_jiedan == 1" color="#FD2A53" @change="onAutoJieDan" />
				</view>
			</view>
		</view>

		<view class="box">
			<view class="list flex_r_between">
				<view class="label">是否自动派单</view>

				<view class="switch">
					<switch :checked="info.auto_dispatch == 1" color="#FD2A53" @change="onAutoDispatch" />
				</view>
			</view>
		</view>

		<view class="box">
			<view class="list flex_r_between" @click="openWorkTime">
				<view class="label">店铺营业时间</view>

				<view class="select flex_center">
					<text v-if="info.work_time_start">{{ info.work_time_start }} 至 {{ info.work_time_end }}</text>
					<text v-else class="no_have">请选择</text>

					<u-icon name="arrow-down-fill" color="#979797" size="24rpx"></u-icon>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="list flex_r_between" @click="show_refund = true">
				<view class="label">添加退款理由(多选)</view>

				<view class="select flex_center">
					<text class="no_have">请选择</text>
					<u-icon name="arrow-down-fill" color="#979797" size="24rpx"></u-icon>
				</view>
			</view>

			<view class="reason">
				<view class="item flex_center" v-for="(item,index) in reason" :key="index">
					<text class="hidden">{{ item }}</text>

					<view class="reason-icon flex_r_around">
						<u-icon name="close-circle-fill" color="#999999" size="32rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="list flex_r_between" @click="show_refund = true">
				<view class="label">下单须知</view>
			</view>

			<view class="textarea">
				<textarea maxlength="-1" auto-height v-model="info.order_notice" placeholder="请填写下单须知"
					placeholder-class="input-placeholder"></textarea>
			</view>
		</view>

		<!-- 时间范围选择器 -->
		<oz-timePicker title="店铺营业时间" segmentation="-" ref="TimePickerPopupRef" :value="value"
			@confirm="confirmWorkTime" />


		<!-- 添加退款理由 -->
		<u-popup :safeAreaInsetBottom="false" :show="show_refund" mode="bottom" @close="show_refund = false"
			bgColor="transparent">
			<view class="refund-config">
				<view class="refund-config-title">添加退款理由(多选)</view>
				<view class="refund-config-container">
					<view class="refund-config-container-list flex_center" v-for="(item,index) in refund_config"
						:key="index" @click="addRefund(item)">
						<text>{{ item.title }}</text>
						<image :src="$util.prefix(`public/select_q${ reason.indexOf(item.title) > -1 ? '_s' : ''}.png`)"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="refund-config-btn flex_r_around" @click="show_refund = false">
					<text>确定</text>
				</view>
			</view>
		</u-popup>

		<!-- 注销店铺弹窗 -->
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal flex_c">
				<view class="modal-title">注销店铺</view>
				<view class="modal-text">
					确认要注销店铺吗？
				</view>
				<view class="modal-btn flex_r_between">
					<view class="modal-btn-item cancel flex_r_around" @click="show = false">
						<text>取消</text>
					</view>

					<view class="modal-btn-item confim flex_r_around" @click="closeStore">
						<text>确认</text>
					</view>
				</view>
			</view>
		</u-popup>


		<button @click="show = true">注销店铺</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					// 开启自动接单：1=开启
					auto_jiedan: 2,

					// 是否自动派单
					auto_dispatch: 2,

					// 营业开始时间
					work_time_start: '',
					// 营业结束时间
					work_time_end: '',

					// 退款理由
					return_reason: '',

					// 下单须知
					order_notice: '',

				},

				value: ['00', '00', '00', '00'],

				// 退款原因选项
				reason: [],
				refund_config: [],
				show_refund: false,

				show: false,
			}
		},
		methods: {
			// 是否开启自动接单
			onAutoJieDan(e) {
				this.info.auto_jiedan = e.detail.value ? 1 : 2;
			},

			// 是否开启自动派单
			onAutoDispatch(e) {
				this.info.auto_dispatch = e.detail.value ? 1 : 2;
			},

			// 营业时间
			openWorkTime() {
				this.$refs.TimePickerPopupRef.open();
			},

			confirmWorkTime(data) {
				this.info.work_time_start = `${data[0]}:${data[1]}`;
				this.info.work_time_end = `${data[2]}:${data[3]}`;
			},

			getRefundConfig() {
				this.$post('/store/getRefundConfig').then(res => {
					this.refund_config = res.data;
				});
			},

			// 添加退款原因
			addRefund(item) {
				var index = this.haveRefundStatus(item.title);
				if (index > -1) {
					this.reason.splice(index, 1)
				} else {
					this.reason.push(item.title);
				}

				this.reason = JSON.parse(JSON.stringify(this.reason));
			},

			// 是否包含当前退款原因
			haveRefundStatus(text) {
				var index = this.reason.indexOf(text);
				return index;
			},

			setStoreConf() {
				this.info.return_reason = JSON.stringify(this.reason);
				this.$post('/store/setStoreConfig', this.info).then(res => {
					this.$util.msg(res.msg);
					setTimeout(() => {
						this.$util.back();
					}, 1000)
				});
			},

			getStoreConf() {
				this.$post('/store/getStoreConf').then(res => {
					// 开启自动接单：1=开启
					this.info.auto_jiedan = res.data.auto_jiedan || 2;
					// 是否自动派单
					this.info.auto_dispatch = res.data.auto_dispatch || 2;
					// 营业开始时间
					this.info.work_time_start = res.data.work_time_start || '00:00';
					// 营业结束时间
					this.info.work_time_end = res.data.work_time_end || '00:00';
					// 下单须知
					this.info.order_notice = res.data.order_notice || '';
					// 退款理由
					if(res.data.return_reason){
						this.reason = JSON.parse(res.data.return_reason);
					}
				})
			},
			
			closeStore(){
				this.$post('/store/closeStore').then(res=>{
					this.$util.msg(res.msg);
					setTimeout(()=>{
						this.$native.backAction();
					},1000)
				});
			},

		},

		onLoad() {
			this.getRefundConfig();
			this.getStoreConf();
		},
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		padding: 32rpx;
		background: #FFF;
	}

	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;

		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}

	.box {
		background: #F7F7F7;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}

	.list {
		height: 100rpx;
		border-radius: 16rpx;

		.label {
			font-weight: 500;
			font-size: 28rpx;
			color: #131313;
		}

		.select {
			text {
				font-size: 28rpx;
				color: #131313;
				margin-right: 16rpx;
			}

			.no_have {
				color: #999999;
			}
		}
	}

	.reason {
		.item {
			height: 72rpx;
			background: #EFEFEF;
			border-radius: 16rpx;
			padding: 0 24rpx;
			margin-bottom: 12rpx;

			text {
				font-size: 28rpx;
				color: #131313;
				flex: 1;
			}

			.reason-icon {}
		}
	}

	.textarea {
		background: #EFEFEF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;

		textarea {
			min-height: 168rpx;
			font-size: 28rpx;
			color: #131313;
			line-height: 40rpx;
			padding: 24rpx;
		}
	}

	.refund-config {
		padding: 40rpx 32rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.refund-config-title {
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			text-align: center;
			margin-bottom: 50rpx;
		}

		.refund-config-container {
			.refund-config-container-list {
				padding: 20rpx 0;

				text {
					flex: 1;
					font-size: 28rpx;
					color: #131313;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.refund-config-btn {
			width: 560rpx;
			height: 100rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			border: 2rpx solid #FD2A53;
			margin: 60rpx auto 0;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

	}

	button {
		width: 560rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 50rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #131313;
		line-height: 100rpx;
		margin-top: 50rpx;
	}

	.modal {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 48rpx 0 38rpx;

		.modal-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
		}

		.modal-text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			margin: 16rpx 0 40rpx;
		}

		.modal-btn {
			width: 472rpx;

			.modal-btn-item {
				width: 224rpx;
				height: 88rpx;
				border-radius: 44rpx;

				text {
					font-size: 28rpx;
				}
			}

			.confim {
				background: #FD2A53;

				text {
					color: #FFFFFF;
				}
			}

			.cancel {
				background: #F1F1F1;

				text {
					color: #131313;
				}
			}
		}

	}
</style>